<template>
    <div class="app-container">

        <div class="card-wrap padding20 flex">

            <div v-for="(item, index) in tabs" :key="index"
                 @click="tabClick(index)"
                 :class="item.check?'tab-active':'tab-normal'">
                {{ item.name }}({{ item.count }})
            </div>

        </div>

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

            <el-col :span="6">
                <el-form-item label="车牌号/车架号:" prop="carNoVinNo">
                    <el-input maxlength="30" v-model="queryParams.carNoVinNo" clearable placeholder="请输入车牌号/车架号"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="品牌/车系/车型:">
                    <linkage-select @changeNode="linkageChange" v-model="linkageList" placeholder="请选择品牌/车系/车型"/>
                </el-form-item>
            </el-col>

<!--            <el-col :span="6">-->
<!--                <el-form-item label="品牌车系车型:" prop="modelId">-->
<!--                    <linkage-select v-model="linkageList"-->
<!--                        :check-strictly="false" style="width: 100%" @changeNode="linkageChange"/>-->
<!--                </el-form-item>-->
<!--            </el-col>-->

            <el-col :span="6">
                <el-form-item label="车辆产权:" prop="propertyRightId">

                    <el-select filterable v-model="queryParams.propertyRightId" clearable style="width: 100%">
                        <template v-for="(item, index) in companyOriginList">
                            <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                        </template>
                    </el-select>

                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车辆归属:" prop="ascriptionId">

                    <el-select filterable @change="belongChange" v-model="queryParams.ascriptionId" clearable style="width: 100%">
                        <template v-for="(item, index) in belongCompanyList">
                            <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                        </template>
                    </el-select>

                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车辆大区:" prop="cityId">

                    <RegionCityLink v-model="queryParams.citydata"
                                    placeholder="请选择城市" ref="citySelect"
                                    :showAllLevels="false" :defaultSelect="selIds"
                                    @change="citySelectionChange"></RegionCityLink>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车辆运营:" prop="operationsName">
                    <el-input maxlength="30" v-model="queryParams.operationsName" clearable placeholder="请输入车辆运营"></el-input>
                </el-form-item>
            </el-col>



            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerName">
                    <el-input maxlength="30" v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="产品类型:" prop="contractType">
                    <el-select filterable v-model="queryParams.contractType" clearable>
                        <template v-for="dict in dict.type.quota_rent_type">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="处理状态:" prop="handleStatus">
                    <el-select filterable v-model="queryParams.handleStatus" clearable>
                        <template v-for="dict in dict.type.illegal_process_status">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="上次查询时间:" prop="lastQueryStartTime">
                    <el-date-picker
                        v-model="timeRange"
                        type="daterange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="车辆状态:" prop="businessType">
                <el-select placeholder="请选择车辆状态" filterable v-model="queryParams.businessType" clearable>
                  <template v-for="dict in dict.type.car_business_type">
                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
                <el-form-item label="违章时间:">
                    <ShortcutDate @isButIdx="isButIdx"
                                  v-model="checked" @dateChangeType="changeShortcutDate">

                        <el-date-picker v-model="dateValue" type="daterange" range-separator="-"
                                        start-placeholder="开始日期" unlink-panels
                                        end-placeholder="结束日期" value-format='yyyy-MM-dd' clearable
                                        @change='changeDate'>
                        </el-date-picker>

                    </ShortcutDate>
                </el-form-item>
            </el-col>

        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleExport"
                           v-hasPermi="['illegalManage:illegalList:export']">导出
                </el-button>
<!--                <el-button type="success" size="mini"-->
<!--                           v-hasPermi="['illegalManage:illegalList:notice']">手动短信通知-->
<!--                </el-button>-->
<!--                <el-button type="info" size="mini"-->
<!--                           v-hasPermi="['illegalManage:illegalList:template']">短信模版-->
<!--                </el-button>-->
<!--                <el-button type="warning" size="mini" @click="handlePublic"-->
<!--                           v-hasPermi="['illegalManage:illegalList:query']">违章查询-->
<!--                </el-button>-->
<!--                <el-button type="danger" size="mini" @click="handleQuota"-->
<!--                           v-hasPermi="['illegalManage:illegalList:order']">违章工单-->
<!--                </el-button>-->
                <el-button type="primary" size="mini" @click="handleAccount"
                           v-hasPermi="['illegalManage:illegalList:account']">账号配置
                </el-button>
            </div>


            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column min-width="150" label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <e-button size="mini" type="text" @click="handleDetail(scope.row)"
                                      v-hasPermi="['illegalManage:illegalList:view']">查看
                            </e-button>
<!--                            <e-button size="mini" type="text"-->
<!--                                      v-hasPermi="['illegalManage:illegalList:msg']">短信提醒-->
<!--                            </e-button>-->
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="车牌号" min-width="115" align="center" prop="carNo">
                        <template v-slot="{row}">
<!--                            <e-button size="mini" type="text">{{row.carNo|filterNull}}-->
<!--                            </e-button>-->
                            {{row.carNo|filterNull}}
                        </template>
                    </el-table-column>

                    <el-table-column label="车辆产权" min-width="115" align="center" prop="propertyRightName">
                        <template v-slot="{row}">
                            {{row.propertyRightName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="车辆归属" min-width="115" align="center" prop="ascription">
                        <template v-slot="{row}">
                            {{row.ascription|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="115" label="车辆大区" align="center" prop="region">
                        <template v-slot="{row}">
                            {{row.region|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="车辆运营" min-width="115" align="center" prop="operationsName">
                        <template v-slot="{row}">
                            {{row.operationsName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="180" label="车架号" align="center" prop="vinNo">
                        <template v-slot="{row}">
                            {{row.vinNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="310" label="品牌/车系/车型" align="center" prop="brandName">
                        <template v-slot="{row}">
                            {{(row.brandName && row.seriesName && row.modelName)?(row.brandName+"/"+row.seriesName+"/"+row.modelName):"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="客户名称" min-width="115" align="center" prop="customerName">
                        <template v-slot="{row}">
                            {{row.customerName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" label="客户联系方式" align="center" prop="customerPhone">
                        <template v-slot="{row}">
                            {{row.customerPhone|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="产品类型" min-width="115" align="center" prop="contractType">

                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.quota_rent_type"
                                :value="scope.row.contractType"
                            />
                        </template>

                    </el-table-column>
                    <el-table-column label="车辆状态" min-width="115" align="center" prop="businessType">
                      <template slot-scope="scope">
                        <dict-tag
                          :options="dict.type.car_business_type"
                          :value="scope.row.businessType"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="车辆性质" min-width="115" align="center" prop="carNature">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.car_nature"
                                :value="scope.row.carNature"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁合同" min-width="115" align="center" prop="contractNo">
                        <template v-slot="{row}">
                            {{row.contractNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="合同开始时间" align="center" prop="contractStartTime">
                        <template v-slot="{row}">
                            {{row.contractStartTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="合同结束时间" align="center" prop="contractEndTime">
                        <template v-slot="{row}">
                            {{row.contractEndTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="130" label="机动车状态" align="center" prop="motorVehicleStatus">
                        <template v-slot="{row}">
                            {{row.motorVehicleStatus|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="燃油类型" min-width="115" align="center" prop="fuelType">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.fuel_type  "
                                :value="scope.row.fuelType"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="处理状态" min-width="115" align="center" prop="handleStatus">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.illegal_process_status"
                                :value="scope.row.handleStatus"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" label="未处理时长" align="center" prop="unProcessedDay">
                        <template v-slot="{row}">
                            {{row.unProcessedDay|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="罚款分数" min-width="115" align="center" prop="penaltyScore">
                        <template v-slot="{row}">
                            {{row.penaltyScore|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="罚款金额" min-width="115" align="center" prop="penaltyPrice">
                        <template v-slot="{row}">
                            {{row.penaltyPrice|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="违章时间" align="center" prop="violationTime">
                        <template v-slot="{row}">
                            {{row.violationTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="190" label="违章地点" align="center" prop="violationAddress">
                        <template v-slot="{row}">
                            {{row.violationAddress|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="190" label="违章事件" align="center" prop="violationEvent">
                        <template v-slot="{row}">
                            {{row.violationEvent|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="处理记录时间" align="center" prop="handleTime">
                        <template v-slot="{row}">
                            {{row.handleTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="上次查询时间" align="center" prop="lastQueryTime">
                        <template v-slot="{row}">
                            {{row.lastQueryTime|filterNull}}
                        </template>
                    </el-table-column>
<!--                    <el-table-column show-overflow-tooltip min-width="150" label="违章备注" align="center" prop="violationRemark">-->
<!--                        <template v-slot="{row}">-->
<!--                            {{row.violationRemark|filterNull}}-->
<!--                        </template>-->
<!--                    </el-table-column>-->


<!--                    <el-table-column label="车辆产权" align="center" prop="customerProperty">-->
<!--                        <template slot-scope="scope">-->
<!--                            <dict-tag-->
<!--                                :options="dict.type.customer_property"-->
<!--                                :value="scope.row.customerProperty"-->
<!--                            />-->
<!--                        </template>-->
<!--                    </el-table-column>-->

                </template>
            </table-page>

        </div>
        <!--    共用额度客户-->
        <el-dialog title="违章查询" :visible.sync="illegalQueryOpen" append-to-body class="form-dialog" width="85%">

            <SearchContent :queryParams="publicForm" @query="handleIllegalQuery" @reset="resetIllegalQuery">

                <el-col :span="6">
                    <el-form-item label="账号:" prop="account">
                        <el-input maxlength="50" v-model="publicForm.account" clearable
                                  placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="所属平台:" prop="platform">

                        <el-select filterable v-model="publicForm.platform" >
                            <template v-for="dict in dict.type.illegal_platform">
                                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                            </template>
                        </el-select>

                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="所属公司:" prop="deptId">
                        <el-select filterable v-model="publicForm.deptId" clearable>
                            <template v-for="(item, index) in companyOriginList">
                                <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                </el-col>
            </SearchContent>

            <div class="flex-row justify-start" style="margin-bottom: 20px">
                <el-button type="primary" size="mini" @click="handleAllQuery"
                           v-hasPermi="['demo:demo:add']">全部车辆查询
                </el-button>
                <el-button type="primary" plain size="mini" @click="handlePartQuery"
                           :disabled="selAccountList==null||selAccountList.length<=0">部分车辆
                </el-button>
            </div>

            <table-page
                @selectionChange="querySelectChange"
                isSelect :loading="loading" :dataList="queryDataList" border :total="queryTotal" :page.sync="publicForm.pageNum"
                        :limit.sync="publicForm.pageSize" @setSizeCurrent="getIllegalQueryList">
                <!-- 操作插槽 -->

                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="账号" align="center" prop="account"/>
<!--                    <el-table-column label="密码" align="center" prop="password"/>-->
                    <el-table-column label="所属平台" align="center" prop="platform">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.illegal_platform"
                                :value="scope.row.platform"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="账号所属公司" align="center" prop="deptName" width="180">
                        <template slot-scope="scope">
                            {{scope.row.deptName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="地区" align="center" prop="addrName">
                        <template slot-scope="scope">
                            {{scope.row.addrName|filterNull}}
                        </template>
                    </el-table-column>
                </template>
            </table-page>

<!--            <div slot="footer" class="dialog-footer" style="text-align: center;">-->
<!--                <el-button @click="publicCancel">{{ isNew ? '取消' : '关闭' }}</el-button>-->
<!--                <el-button :loading="publicLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>-->
<!--            </div>-->
        </el-dialog>

        <!--    额度查看-->
        <el-dialog title="违章工单" :visible.sync="illegalOrderOpen" append-to-body class="form-dialog" width="85%">
            <SearchContent :queryParams="illegalOrderForm" @query="handleWorkOrderQuery" @reset="resetWorkOrderQuery">

                <el-col :span="6">
                    <el-form-item label="提交时间:" prop="startCommitTime">
                        <el-date-picker
                            v-model="illegalOrderForm.timeRange0"
                            type="daterange"
                            align="left"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="处理时间:" prop="startProcessingTime">
                        <el-date-picker
                            v-model="illegalOrderForm.timeRange1"
                            type="daterange"
                            align="left"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="处理状态:" prop="processingStatus">
                        <el-select filterable v-model="illegalOrderForm.processingStatus" clearable>
                            <template v-for="dict in dict.type.illegal_process_status">
                                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                </el-col>
            </SearchContent>

            <table-page :loading="loading" :dataList="wOrderDataList" border :total="wOrderTotal" :page.sync="illegalOrderForm.pageNum"
                        :limit.sync="illegalOrderForm.pageSize" @setSizeCurrent="getWorkOrderList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <e-button size="mini" type="text" @click="workDetail(scope.row)"
                                      >查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="工单号" align="center" prop="workOrderNo"/>
                    <el-table-column label="处理状态" align="center" prop="processingStatus">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.illegal_process_status"
                                :value="scope.row.processingStatus"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="提交人" align="center" prop="commitMan" >
                        <template v-slot="{row}">
                            {{row.commitMan|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="提交时间" align="center" prop="commitTime" >
                        <template v-slot="{row}">
                            {{row.commitTime|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="处理时间" align="center" prop="processingTime">
                        <template v-slot="{row}">
                            {{row.processingTime|filterNull}}
                        </template>
                    </el-table-column>
                </template>
            </table-page>
        </el-dialog>

        <!--    额度查看-->
        <el-dialog title="违章工单详情" :visible.sync="illegalOrderDetailOpen" append-to-body class="form-dialog" width="85%">
            <el-descriptions title="工单信息">
                <el-descriptions-item label="工单号">
                    {{ illegalOrderDetail.workOrderNo|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="提交人">{{ illegalOrderDetail.commitMan|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="提交时间">{{ illegalOrderDetail.commitTime|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="处理状态">
                    <dict-tag
                        :options="dict.type.illegal_process_status"
                        :value="illegalOrderDetail.processingStatus"/>
                </el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ illegalOrderDetail.processingTime|filterNull }}</el-descriptions-item>

            </el-descriptions>

            <el-descriptions title="基础信息"></el-descriptions>

            <table-page :loading="loading" :dataList="illegalOrderDetailCars" border :total="orderCarTotal" :page.sync="orderCarParams.pageNum"
                        :limit.sync="orderCarParams.pageSize" @setSizeCurrent="getWorkOrderCar">
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="车牌号" align="center" prop="carNo">
                        <template v-slot="{row}">
                            {{row.carNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="车架号" align="center" prop="vinNo">
                        <template v-slot="{row}">
                            {{row.vinNo|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="车辆类型" align="center" prop="carType">
                        <template v-slot="{row}">
                            {{row.carType|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="车辆所属公司" align="center" prop="ascription">
                        <template v-slot="{row}">
                            {{row.ascription|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="查询账号" align="center" prop="queryAccount">
                        <template v-slot="{row}">
                            {{row.queryAccount|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="查询平台" align="center" prop="platformStr">
                        <template v-slot="{row}">
                            {{row.platformStr|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="查询状态" align="center" prop="queryStatus">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.illegal_query_status"
                                :value="scope.row.queryStatus"
                            />
                        </template>
                    </el-table-column>
                </template>
            </table-page>
        </el-dialog>

        <!--    共用额度客户-->
        <el-dialog title="违章账号" :visible.sync="illegalAccountOpen" append-to-body class="form-dialog" width="85%">

            <SearchContent :queryParams="illegalAccountForm" @query="handleAccountQuery" @reset="resetAccountQuery">

                <el-col :span="6">
                    <el-form-item label="账号:" prop="account">
                        <el-input maxlength="50" v-model="illegalAccountForm.account" clearable
                                  placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="所属平台:" prop="platform">

                        <el-select filterable v-model="illegalAccountForm.platform" >
                            <template v-for="dict in dict.type.illegal_platform">
                                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                            </template>
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="6" style="height: 20px"></el-col>

<!--                <el-col :span="6">-->
<!--                    <el-form-item label="所属公司:" prop="deptId">-->
<!--                        <el-select filterable v-model="illegalAccountForm.deptId" clearable>-->
<!--                            <template v-for="(item, index) in companyOriginList">-->
<!--                                <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>-->
<!--                            </template>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
            </SearchContent>

            <div class="flex-row justify-start" style="margin-bottom: 20px">
                <el-button type="primary" size="mini" @click="handleAcconutAdd"
                           v-hasPermi="['illegalManage:illegalList:addAccount']">新增
                </el-button>
            </div>

            <table-page
                isIndex
                :loading="loading" :dataList="accountDataList" border :total="accountTotal" :page.sync="illegalAccountForm.pageNum"
                :limit.sync="illegalAccountForm.pageSize" @setSizeCurrent="getAccountDataList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
                        <template slot-scope="{row}">
                            <e-button size="mini" type="text" @click="toggleEnable(row)"
                                      >{{'0' == row.enableFlag ? '启用' : '1' == row.enableFlag ? '禁用' : ''}}
                            </e-button>
                            <e-button size="mini" type="text" @click="editAccount(row)"
                                      >编辑
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="账号" align="center" prop="account" min-width="100" show-overflow-tooltip/>
<!--                    <el-table-column label="密码" align="center" prop="password"/>-->
                    <el-table-column label="所属平台" align="center" prop="platform" min-width="130" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.illegal_platform"
                                :value="scope.row.platform"
                            />
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="账号所属公司" align="center" prop="deptName" width="180">-->
<!--                        <template slot-scope="scope">-->
<!--                            {{scope.row.deptName|filterNull}}-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="地区" align="center" prop="addrName" min-width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.addrName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否需要U盾" align="center" prop="shieldFlag" min-width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{0==scope.row.shieldFlag?'否':1==scope.row.shieldFlag?'是':'--'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="账号性质" align="center" prop="accountNature" min-width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.account_nature"
                                :value="scope.row.accountNature"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="remark" min-width="190" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.remark | filterNull}}</span>
                        </template>
                    </el-table-column>
                </template>
            </table-page>

            <!--            <div slot="footer" class="dialog-footer" style="text-align: center;">-->
            <!--                <el-button @click="publicCancel">{{ isNew ? '取消' : '关闭' }}</el-button>-->
            <!--                <el-button :loading="publicLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>-->
            <!--            </div>-->
        </el-dialog>

        <!-- 新增账号 -->
        <add-account ref="addAccount" @success="handleAccountQuery"></add-account>

    </div>
</template>

<script>

import SearchContent from "@/components/SearchContent/index.vue";
import {delModel} from "@/api/zcwh/vehicleModelApi";
import {customerDelete, customerStatistics, getCustomerList, quotaSharing} from "@/api/memberManage/memberList";
import LinkageSelect from "@/views/components/linkageSelect.vue";
import CitySelect from "@/views/components/citySelect.vue";
import ShortcutDate from "@/views/components/ShortcutDate/index.vue";
import AddAccount from "@/views/illegalManage/components/addAccount.vue";
import {listDept} from "@/api/system/dept";
import * as illegalApi from "@/api/illegalManage/illegalList";
import {
    illegalAccountList,
    illegalAcountCreate, illegalWorkOrderDetail,
    illegalWorkOrderPage, listIllegal, queryCarViolationStatistics, queryIllegalWorkOrderCar,
    workOrderAccount
} from "@/api/illegalManage/illegalList";
import RegionCityLink from "@/views/components/provinceCity/regionCityLink.vue";

export default {
    name:"IllegalList",
    components: {
        RegionCityLink,
        ShortcutDate,
        CitySelect,
        LinkageSelect,
        SearchContent,
        AddAccount
    },
    dicts: ['illegal_platform', 'illegal_platform_enable', 'illegal_process_status', 'illegal_query_status', 'quota_rent_type', 'car_nature', 'fuel_type', 'account_nature', 'car_business_type'],
    data() {
        return {
            checked: "",
            companyOriginList: [],
            illegalOrderDetail:{},
            illegalOrderDetailCars:[],
            dateValue: [],
            citySelection: [],
            timeRange: [],
            //按钮loading
            buttonLoading: false,
            publicLoading: false,
            quotaloading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 弹出层标题
            title: "",
            illegalQueryOpen: false,
            illegalOrderOpen: false,
            illegalOrderDetailOpen: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                carNoVinNo:null,
                seriesId:null,
                brandId:null,
                modelId:null,
                propertyRightId:null,
                ascriptionId:null,
                cityId:null,
                operationsName:null,
                customerName:null,
                contractType:null,
                handleStatus:null,
                violationStartTime:null,
                violationEndTime:null,
                lastQueryStartTime:null,
                lastQueryEndTime:null,
                violationDays:'0',
                citydata:[]
            },

            total: 0,
            dataList: [],
            quotaTotal: 0,
            quotaList: [],
            quotaParams: {
                pageNum: 1,
                pageSize: 10,
            },
            illegalAccountOpen:false,
            illegalAccountForm:{
                pageNum:1,
                pageSize:10,
                platform:'1',
                account:'',
                deptId:'',
            },
            queryDataList:[],
            queryTotal:0,

            accountDataList:[],
            accountTotal:0,
            illegalOrderForm:{
                pageNum:1,
                pageSize:10,
                startCommitTime:'',
                endCommitTime:'',
                startProcessingTime:'',
                endProcessingTime:'',
                processingStatus:'',
            },
            publicForm: {
                pageNum:1,
                pageSize:10,
                platform:'1',
                account:'',
                deptId:'',
            },
            // 表单校验
            rules: {
                tagName: [
                    {required: true, message: "标签名称不能为空", trigger: "blur"}
                ],
            },
            // 表单校验
            publicRules: {
                tagName: [
                    {required: true, message: "标签名称不能为空", trigger: "blur"}
                ],
            },
            tabs: [{
                name: '全部',
                count: 0,
                check: true
            }, {
                name: '违章超过90天以上未处理',
                count: 0,
                check: false
            }, {
                name: '违章超过30天未处理',
                count: 0,
                check: false
            }, {
                name: '违章超过15天未处理',
                count: 0,
                check: false
            }],
            selAccountList:[],
            wOrderDataList:[],
            wOrderTotal:0,
            timeRange0:[],
            timeRange1:[],
            selWorkOrderDetail:{},

            orderCarParams:{
                pageNum:1,
                pageSize:10,
            },
            orderCarTotal:0,
            belongCompanyList:[],
            selIds:[],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            linkageList:[]

        };
    },
    created() {
        this.getList();
        this.getCompanyOrigin();
    },
    activated() {
        this.getList()
        this.getCompanyOrigin();
    },
    methods: {
        handleAllQuery(){
            illegalApi.illegalAcountCreate({
                platform:this.publicForm.platform,
                queryMode:0
            }).then(res=>{
                this.$modal.msgSuccess('查询成功')
                this.handleIllegalQuery()
            })
        },
        handlePartQuery(){
            illegalApi.illegalAcountCreate({
                platform:this.publicForm.platform,
                queryMode:1,
                workOrderAccountList:this.selAccountList
            }).then(res=>{
                this.$modal.msgSuccess('查询成功')
                this.handleIllegalQuery()
            })
        },

        handleWorkOrderQuery(){
            this.loading = true;

            this.illegalOrderForm.pageNum = 1;
            this.getWorkOrderList();
        },
        // 表单重置
        resetWorkOrderQuery() {
            this.illegalOrderForm = {
                pageNum:1,
                pageSize:10,
                startCommitTime:'',
                endCommitTime:'',
                startProcessingTime:'',
                endProcessingTime:'',
                processingStatus:'',
            };
            this.timeRange0 = []
            this.timeRange1 = []
            this.getWorkOrderList();
        },

        getWorkOrderList(){
            this.loading = true;

            this.illegalOrderForm.startCommitTime = this.timeRange0 && this.timeRange0[0] ? this.timeRange0[0] : ''
            this.illegalOrderForm.endCommitTime = this.timeRange0 && this.timeRange0[1] ? this.timeRange0[1] : ''

            this.illegalOrderForm.startProcessingTime = this.timeRange1 && this.timeRange1[0] ? this.timeRange1[0] : ''
            this.illegalOrderForm.endProcessingTime = this.timeRange1 && this.timeRange1[1] ? this.timeRange1[1] : ''

            illegalWorkOrderPage(this.illegalOrderForm).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.wOrderDataList = rows
                    this.wOrderTotal = total
                    this.loading = false;
                }
            });
        },

        workDetail(item){
            this.illegalOrderDetail ={}
            this.illegalOrderDetailCars =[]

            this.selWorkOrderDetail = item

            if(this.selWorkOrderDetail && this.selWorkOrderDetail.id){
                illegalApi.illegalWorkOrderDetail(this.selWorkOrderDetail.id).then(res=>{
                    this.illegalOrderDetail = res.data;
                })
            }

            this.getWorkOrderCar();

            this.illegalOrderDetailOpen=true;
        },

        getWorkOrderCar(){
            this.orderCarParams.workOrderNo = this.selWorkOrderDetail.workOrderNo
            if(this.selWorkOrderDetail && this.selWorkOrderDetail.workOrderNo){
                illegalApi.queryIllegalWorkOrderCar(this.orderCarParams).then(res=>{
                    this.illegalOrderDetailCars = res.rows;
                    this.orderCarTotal = res.total;
                })
            }
        },

        querySelectChange(val){
            console.log('querySelectChange', val)
            this.selAccountList = val
        },

        toggleEnable(item){
            console.log('toggleEnable', item)

            item.enableFlag = '1' == item.enableFlag ? '0': '0' == item.enableFlag ? '1': null
            illegalApi.workOrderAccount(item).then(res=>{
                this.$modal.msgSuccess('修改成功')
                this.handleAccountQuery()
            })
        },
        isButIdx(idx) {
            this.checked = idx;
            // this.dateValue = [];
        },
        changeDate(val) {
            this.checked = -1;
            if (val) {
                this.queryParams.violationStartTime = val[0]
                this.queryParams.violationEndTime = val[1]
            } else {
                this.queryParams.violationStartTime = ""
                this.queryParams.violationEndTime = ""
            }
        },
        changeShortcutDate(val) {
            if (val) {
                this.dateValue = val
                this.queryParams.violationStartTime = val[0]
                this.queryParams.violationEndTime = val[1]
            } else {
                this.queryParams.violationStartTime = ""
                this.queryParams.violationEndTime = ""
            }
            console.log('changeShortcutDate', val, this.queryParams)
            // this.dateValue = []
            // this.queryParams.violationStartTime = val[0]
            // this.queryParams.violationEndTime = val[1]
            // this.getList()
        },

        async linkageChange(val) {
            this.linkageList = val
            if (val) {
                this.queryParams.brandId = val[0] ? val[0].id : ''
                this.queryParams.seriesId = val[1] ? val[1].id : ''
                this.queryParams.modelId = val[2] ? val[2].id : ''
                this.queryParams.brandName = val[0] ? val[0].name : ''
                this.queryParams.seriesName = val[1] ? val[1].name : ''
                this.queryParams.modelName = val[2] ? val[2].name : ''
            } else {
                this.queryParams.brandId = null
                this.queryParams.seriesId = null
                this.queryParams.modelId = null
                this.queryParams.brandName = null
                this.queryParams.seriesName = null
                this.queryParams.modelName = null
            }

            // this.getColorList(fitem)
            this.getSeatList(fitem)
            this.$forceUpdate()
        },

        /** 查询测试单表列表 */
        getList() {
            this.loading = true;
            this.queryParams.violationStartTime = this.dateValue && this.dateValue[0] ? this.dateValue[0] : ''
            this.queryParams.violationEndTime = this.dateValue && this.dateValue[1] ? this.dateValue[1] : ''

            this.queryParams.lastQueryStartTime = this.timeRange && this.timeRange[0] ? this.timeRange[0] : ''
            this.queryParams.lastQueryEndTime = this.timeRange && this.timeRange[1] ? this.timeRange[1] : ''

            illegalApi.listIllegal(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;

                }
            });


            illegalApi.queryCarViolationStatistics({...this.queryParams, violationDays: null}).then(res => {
                this.tabs[0].count = res.totalCount
                this.tabs[1].count = res.toNinetyUnProcessedCount
                this.tabs[2].count = res.toThirtyUnProcessedCount
                this.tabs[3].count = res.toFifteenUnProcessedCount
            })
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        // 取消按钮
        publicCancel() {
            this.illegalQueryOpen = false;
            this.resetIllegalQuery();
        },

        handleIllegalQuery() {
            this.loading = true;
            this.publicForm.pageNum = 1;
            this.getIllegalQueryList();
        },

        // 表单重置
        resetIllegalQuery() {
            this.publicForm = {
                pageNum:1,
                pageSize:10,
                platform:'1',
                account:'',
                deptId:'',
            };
            this.getIllegalQueryList();
        },
        getIllegalQueryList(){
            illegalAccountList({...this.publicForm, enableFlag:1 }).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.queryDataList = rows
                    this.queryTotal = total
                    this.loading = false;
                }
            });
        },
        handleAccountQuery() {
            this.loading = true;

            this.illegalAccountForm.pageNum = 1;
            this.getAccountDataList();
        },
        getAccountDataList(){
            illegalAccountList(this.illegalAccountForm).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.accountDataList = rows
                    this.accountTotal = total
                    this.loading = false;
                }
            });
        },
        resetAccountQuery(){
            this.illegalAccountForm = {
                pageNum:1,
                pageSize:10,
                platform:'1',
                account:'',
                deptId:'',
            };
            this.handleAccountQuery();
        },

        handleAcconutAdd(){
            this.$refs.addAccount.show(0);
        },

        editAccount(row){
            this.$refs.addAccount.show(1, row.id);
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            //选择了已处理或者违章时间的，置为全部
            if(Number(this.queryParams.handleStatus)===2 ){
                if(this.queryParams.violationDays !== '0'){
                    this.tabs.forEach((item, i) => {
                        item.check = 0 == i;
                    })
                    this.queryParams.violationDays = '0'
                }
            }

            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery(index=0) {
            this.timeRange = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                carNoVinNo:null,
                seriesId:null,
                brandId:null,
                modelId:null,
                propertyRightId:null,
                ascriptionId:null,
                cityId:null,
                operationsName:null,
                customerName:null,
                contractType:null,
                handleStatus:null,
                violationStartTime:null,
                violationEndTime:null,
                lastQueryStartTime:null,
                lastQueryEndTime:null,
                violationDays:'0',
                citydata:[],
            },
            this.checked = -1;
            this.citySelection = []
            this.selIds = []
            this.dateValue = []
            this.linkageList = []
            this.tabs.forEach((item, i) => {
                item.check = index == i;
            })
            if(index == 1){
                this.queryParams.violationDays = '90'
            }else if(index == 2){
                this.queryParams.violationDays = '30'
            }else if(index == 3){
                this.queryParams.violationDays = '15'
            }else {
                this.queryParams.violationDays = '0'
            }
            this.citySelectionChange([])
            // this.resetForm("queryForm");
            this.handleQuery();
        },

        /** 新增操作 */
        handleAdd() {
            this.$router.push({
                name: 'memberAdd',
                // query: {orderNo: row.orderNo}
            })
        },

        handleAccount(){
            this.illegalAccountOpen = true;
            this.handleAccountQuery();
        },

        tabClick(index) {
            this.tabs.forEach((item, i) => {
                item.check = index == i;
            })

            if(index == 1){
                this.queryParams.violationDays = '90'
                this.queryParams.handleStatus = '1'
            }else if(index == 2){
                this.queryParams.violationDays = '30'
                this.queryParams.handleStatus = '1'
            }else if(index == 3){
                this.queryParams.violationDays = '15'
                this.queryParams.handleStatus = '1'
            }else {
                this.queryParams.violationDays = '0'
                this.queryParams.handleStatus = null
            }

            this.handleQuery()
            //this.resetQuery(index)
        },

        /** 转移 */
        handleTransfer() {
            this.reset();
            this.open = true;
            // this.isNew = true
            this.title = "开票信息";

        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/carViolation/exportList', {
                ...this.queryParams
            }, `违章列表.xlsx`)
        },
        handleDetail(row) {
            this.$router.push({
                name: 'IllegalListDetail',
                query: {
                  carViolationId: row.carViolationId,
                  carNo: row.carNo
                }
            })
        },

        handlePublic(row) {
            // this.reset();
            this.illegalQueryOpen = true;
            // this.isNew = true
            this.handleIllegalQuery();
        },

        handleQuota(row) {
            // this.reset();
            this.illegalOrderOpen = true;

            this.handleWorkOrderQuery();

            // this.isNew = true

        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push({
                name: 'memberEdit',
                query: {customerId: row.customerId}
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('确定删除？').then(() => {
                this.loading = true;
                return customerDelete(row.customerId);
            }).then(() => {
                this.loading = false;
                this.handleQuery();
                this.$modal.msgSuccess("删除成功");
            }).finally(() => {
                this.loading = false;
            });

        },

        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;
                    if (this.form.id) {
                        updateCar(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {
                            this.buttonLoading = false;
                        });
                    } else {
                        carBrandAdd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {
                            this.buttonLoading = false;
                        });
                    }
                }
            });
        },



        getCompanyOrigin(){
            listDept(
                {deptType:'2',//组织类型（1部门 2公司）
                    regionId:null,//所在城市（省市区id）
                }).then(res=>{
                this.companyOriginList = res.data
                this.belongCompanyList = res.data
            })
        },

        getBelongCompany(){
            listDept(
                {deptType:'2',//组织类型（1部门 2公司）
                    regionId:this.queryParams.cityId,//所在城市（省市区id）
                }).then(res=>{
                this.belongCompanyList = res.data
            })
        },
        citySelectionChange(val) {
            if (val.length > 0) {
                this.queryParams.region = val[0].pathNodes[0].label
                this.queryParams.regionId = val[0].pathNodes[0].value
                this.queryParams.provinceName = val[0].pathNodes[1].label
                this.queryParams.provinceId = val[0].pathNodes[1].value
                this.queryParams.cityName = val[0].pathNodes[2].label
                this.queryParams.cityId = val[0].pathNodes[2].value
            } else {
                this.queryParams.regionId = null
                this.queryParams.region = null
                this.queryParams.provinceName = null
                this.queryParams.provinceId = null
                this.queryParams.cityId = null
                this.queryParams.cityName = null
            }

            let find = this.belongCompanyList.find(item=>this.queryParams.ascriptionId==item.deptId);

            if(this.queryParams.cityId && find && this.queryParams.cityId!=find.regionId.split("/")[1]){
                this.queryParams.ascription = null;
                this.queryParams.ascriptionId = null;
            }


            this.belongCompanyList = []
            this.getBelongCompany();
        },

        //归属
        belongChange(val){
            let find = this.belongCompanyList.find(item=>val==item.deptId);
            if(find){
                this.queryParams.ascription = find.deptName??null
                console.log('belongChange', find)

                this.selIds = [find.areaId,
                    find.regionId && find.regionId.split("/")[0],
                    find.regionId && find.regionId.split("/")[1]
                ];
            }else {
                this.selIds = []
            }


        },

    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}

.form-dialog{
    ::v-deep .el-dialog__body .el-form{
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
}

.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
